<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			div {
				width: 200px;
				height: 200px;
				background-color: aqua;
				/* 4个属性值：上右下左 */
				/* 3个属性值：上  左右  下 */
				/* 2个属性值：上下  左右 */
				/* 1个属性值：4个方向 */
				/* border-color: red blue green;
				border-width: 10px;
				border-style: solid; */
				border: 1px solid red;
				/* 内边距 */
				padding: 20px;
				/* 外边距 */
				margin: 20px;
				/* 
				   border-box：content = width/height - padding * 2 - border * 2
				   content-box：默认计算方式width/height + border * 2 + padding * 2 
				*/
				box-sizing: border-box;
			}
			/* p {
				margin: 0;
			} */
			/* * {
				margin: 0;
				padding: 0;
			} */
		</style>
	</head>
	<body>
		<div>
			盒子模型
		</div>
		<!-- 
			外边距重叠：
			在垂直方向上，2个相邻元素的外边距会重叠，以大的为准 
		-->
		<p>
			文本内容
		</p>
	</body>
</html>